<template>
	<view>
		<view>
			<u-swipe-action v-for="(item, index) in userMessage" :key="index"  :show="true"  @click="click"  :options="options">
				<view class="item u-border-bottom">
					<image mode="aspectFill" :src="item.imgSrc" />

					<view class="title-wrap">
						<text class="title u-line-2">{{ item.nickname}}</text>
					</view>
					
					<view class="pass-rej">
						<u-icon @click="pass(index)" size="50" color="#71d5a1" name="checkbox-mark"></u-icon>
						<u-icon @click="reject(index)" style="position: relative; margin-left: 40rpx;" size="50" color="red" name="close"></u-icon>
					</view>	
				</view>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
	export default {
		name: "newList",
		data() {
			return {
				id: this.userid,
				userMessage: [],
				options: [
					// {
					// 	text: '收藏',
					// 	style: {
					// 		backgroundColor: '#007aff'
					// 	}
					// },
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		props: ['userid'],
		
		methods:{
			click(index, index1) {
				var that = this
							if(index1 == 0) {
								uni.showModal({
									title: '提示',
									content: '确认删除',
									success: function (res) {
										if (res.confirm) {
											that.userMessage.splice(index, 1);
											that.$u.toast(`删除成功~`);
										} else if (res.cancel) {
											
										}
									}
								});
								
							} else {
								
								that.$u.toast(`收藏成功`);
							}
						},
						
						pass(index){
							this.userMessage.splice(index, 1);
							this.$u.toast(`通过好友申请成功~`);
						},
						
						reject(index){
							var that = this
							uni.showModal({
								title: '提示',
								content: '确认拒绝',
								success: function (res) {
									if (res.confirm) {
										that.userMessage.splice(index, 1);
										that.$u.toast(`拒绝申请成功~`);
									} else if (res.cancel) {
										
									}
								}
							});
						}
						
						
		},

		onReady() {
			const db = uniCloud.database()
			db.collection('users').doc(this.id)
				.field({
					imgSrc: true,
					nickname: true
				}).get().then(res => {
					this.userMessage.push(res.result.data[0])
				}).catch(err => {

				})
		},
	}
</script>

<style lang="scss" >

.item {
		display: flex;
		padding: 20rpx;
	}
	
	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
	
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}
	
	.pass-rej{
		position: absolute;
		right: 100rpx;
		display: flex;
		align-items: center;
	}


</style>
